<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - 页面未找到</title>
    <!-- Tailwind CSS v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        success: '#00B42A',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                        'neutral-100': '#F7F8FA',
                        'neutral-200': '#E5E6EB',
                        'neutral-300': '#C9CDD4',
                        'neutral-400': '#86909C',
                        'neutral-500': '#4E5969',
                        'neutral-600': '#272E3B',
                        'neutral-700': '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'float': 'float 3s ease-in-out infinite',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        }
                    }
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .btn-primary {
        @apply bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5;
      }
      .btn-secondary {
        @apply bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5;
      }
      .btn-outline {
        @apply bg-white hover:bg-neutral-100 text-primary font-medium py-3 px-6 rounded-lg border border-primary transition-all duration-300;
      }
    }
  </style>
</head>

<body class="font-inter bg-neutral-100 min-h-screen flex flex-col">
    <!-- 顶部通知栏 -->
    <div class="bg-primary text-white text-center py-2 text-sm">
        <p>限时优惠：全场满199元免运费 | 新用户注册送50元优惠券</p>
    </div>

    <!-- 导航栏 -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 md:px-6">
            <div class="flex items-center justify-between py-4">
                <a href="#" class="flex items-center space-x-2">
                    <i class="fa fa-shopping-bag text-2xl text-primary"></i>
                    <span class="text-xl font-bold text-neutral-700">ShopEase</span>
                </a>

                <div class="hidden md:flex items-center space-x-6">
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-shopping-cart mr-1"></i> 购物车
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-heart-o mr-1"></i> 收藏夹
                    </a>
                </div>

                <button class="md:hidden text-neutral-700">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow flex items-center justify-center px-4 py-16">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col md:flex-row items-center justify-center">
                <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
                    <div class="relative">
                        <!-- 404 图形 -->
                        <div class="text-[clamp(10rem,20vw,15rem)] font-bold text-primary/10 leading-none">404</div>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="w-48 h-48 relative animate-float">
                                <div class="absolute inset-0 bg-primary/10 rounded-full blur-3xl"></div>
                                <div class="absolute inset-4 bg-primary/20 rounded-full blur-2xl"></div>
                                <div
                                    class="absolute inset-8 bg-white rounded-full flex items-center justify-center shadow-xl">
                                    <i class="fa fa-exclamation-triangle text-6xl text-primary"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="md:w-1/2 text-center md:text-left">
                    <h1 class="text-[clamp(2rem,4vw,3rem)] font-bold text-neutral-700 mb-4">页面去哪了？</h1>
                    <p class="text-lg text-neutral-500 mb-8">我们找不到你要访问的页面，可能是链接错误或页面已被移除。</p>
                    <div
                        class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center md:justify-start">
                        <a href="#" class="btn-primary flex items-center justify-center">
                            <i class="fa fa-home mr-2"></i> 返回首页
                        </a>
                        <a href="#"
                            class="bg-white hover:bg-light text-dark font-medium py-3 px-6 rounded-lg border border-neutral-200 transition-all duration-300 hover:shadow-md flex items-center justify-center">
                            <i class="fa fa-search mr-2"></i> 搜索商品
                        </a>
                    </div>
                    <div class="mt-12 p-6 bg-white rounded-xl shadow-md border border-neutral-200">
                        <h3 class="font-medium text-neutral-700 mb-4">需要帮助？</h3>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                                <span class="text-neutral-500">检查URL拼写是否正确</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                                <span class="text-neutral-500">尝试刷新页面</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                                <span class="text-neutral-500">联系我们的客服团队</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white py-8 border-t border-neutral-200">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <p class="text-neutral-500 text-sm mb-4 md:mb-0">© 2023 ShopEase. 保留所有权利。</p>
                <div class="flex space-x-6">
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors text-sm">隐私政策</a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors text-sm">服务条款</a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors text-sm">联系我们</a>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>